<template>
  <div
    class="listDialogContainer"
    v-show="showMask"
    @click="showMask && clickBlank()"
  >
    <div
      class="leftContainer"
      :style="{
        top: getViewBottom,
        width: getViewWidth,
        left: getViewMarginLeft,
        height: getViewHeight,
      }"
      v-show="listData.type === 0"
    >
      <div class="leftRightCard">
        <div class="dialogBtnsContent">
          <div
            class="timerBtnContainer"
            v-for="(item, key) in listData.list"
            :key="key"
            @click="clickItem(key)"
          >
            <div
              class="timeBtn"
              :style="{
                background:
                  listData.selectedIndex === key
                    ? getSelectedItemBg
                    : getUnselectedItemBg,
              }"
            >
              <div
                class="left"
                :style="{
                  color:
                    listData.selectedIndex === key
                      ? getSelectedItemText
                      : getUnselectedItemText,
                }"
              >
                {{ item.name }}
              </div>
            </div>
            <div
              class="divider"
              v-show="
                key !== listData.list.length - 1 &&
                key + 1 !== listData.selectedIndex &&
                key !== listData.selectedIndex
              "
            ></div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="centerContainer"
      :style="{
        top: getViewBottom,
        height: getViewHeight,
      }"
      v-show="listData.type === 1"
    >
      <div class="centerCard" :style="{ width: getViewWidth }">
        <div class="dialogBtnsContent">
          <div
            class="timerBtnContainer"
            v-for="(item, key) in listData.list"
            :key="key"
            @click="clickItem(key)"
          >
            <div
              class="timeBtn"
              :style="{
                background:
                  listData.selectedIndex === key
                    ? getSelectedItemBg
                    : getUnselectedItemBg,
              }"
            >
              <div
                class="left"
                :style="{
                  color:
                    listData.selectedIndex === key
                      ? getSelectedItemText
                      : getUnselectedItemText,
                }"
              >
                {{ item.name }}
              </div>
            </div>
            <div
              class="divider"
              v-show="
                key !== listData.list.length - 1 &&
                key + 1 !== listData.selectedIndex &&
                key !== listData.selectedIndex
              "
            ></div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="rightContainer"
      :style="{
        top: getViewBottom,
        width: getViewWidth,
        right: getViewMarginLeft,
        height: getViewHeight,
      }"
      v-show="listData.type === 2"
    >
      <div class="leftRightCard">
        <div class="dialogBtnsContent">
          <div
            class="timerBtnContainer"
            v-for="(item, key) in listData.list"
            :key="key"
            @click="clickItem(key)"
          >
            <div
              class="timeBtn"
              :style="{
                background:
                  listData.selectedIndex === key
                    ? getSelectedItemBg
                    : getUnselectedItemBg,
              }"
            >
              <div
                class="left"
                :style="{
                  color:
                    listData.selectedIndex === key
                      ? getSelectedItemText
                      : getUnselectedItemText,
                }"
              >
                {{ item.name }}
              </div>
            </div>
            <div
              class="divider"
              v-show="
                key !== listData.list.length - 1 &&
                key + 1 !== listData.selectedIndex &&
                key !== listData.selectedIndex
              "
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  refreshWebView,
  modifyTitleBar,
  setChangeTitleStyle,
  overrideTitleBarRightBtn,
  setgoSettingListener,
  setMessageVisible,
  getStatusBarHeight,
  setStatuBarHeightListener,
  sendProperty,
  setPropertiesListener,
  setNavigationVisible,
  getDevCacheAll,
  getProperty,
  toast,
  debugLog,
  userLog,
  getDarkMode,
  finishDeviceActivity,
  deleteDevice,
  modifyDeviceName,
  modifyDeviceNameById,
  modifyRoomName,
  getDeviceInfo,
  setDeviceInfoListener,
  setDeleteDeviceCallBack,
  setModifyDeviceNameCallBack,
  setModifyDeviceNameByIdCallBack,
  setModifyRoomCallBack,
  setSendPropertyListener,
  setRequestPropertyListener,
  setOnResumeListener,
  createRule,
  setCreateRuleListener,
  deleteRule,
  setDeleteRuleListener,
  getRules,
  setGetRuleListener,
  controlRuleActive,
  setControlRuleActiveListener,
  jumpToSetting,
  setJumpToSettingListener,
  getSwitchProperties,
  setRequestSwitchPropertiesListener,
  getControlProperties,
  setRequestControlPropertiesListener,
  getStatusProperties,
  setRequestStatusPropertiesListener,
  getGearProperties,
  setRequestGearPropertiesListener,
  getWarnEventProperties,
  setRequestWarnEventPropertiesListener,
  getFaultEventProperties,
  setRequestFaultEventPropertiesListener,
  isScreenSpreaded,
  saveStorageSync,
  setSaveStorageSyncListener,
  getStorageSync,
  setGetStorageSyncListener,
  removeStorageSync,
  setRemoveStorageSyncListener,
} from "../../assets/js/device";
import {
  WIDTH_PHONE,
  PHONE_RATIO,
  WIDTH_SPREADED,
  SPREADED_RATIO,
  WIDTH_PAD_PORTRAIT,
  PAD_PORTRAIT_RATIO,
  WIDTH_PAD_LANDSCAPE,
  PAD_LANDSCAPE_RATIO,
  WIDTH_STANDARD,
  SPREADED_SCREEN_RATIO,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenDpr,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageMarginStyle,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
  setScreenResizeListener,
  itemWidth,
} from "../../assets/js/flexible.js";
export default {
  props: {
    value: false,
    listData: {},

    cancelText: {
      type: String,
      default: "取消",
    },

    attachViewTopPro: {
      type: Number,
      default: 100,
    },
    attachViewWidth: {
      type: Number,
      default: 100,
    },
    darkMode: {
      type: String,
      default: "light",
    },
    deviceTypePro: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      showMask: false,
      deviceType: 1,
      attachViewTop: 100,
    };
  },
  created() {},

  mounted() {
    this.deviceType = screenType;
    this.showMask = this.value;
    this.attachViewTop = this.attachViewTopPro;
  },
  watch: {
    deviceTypePro(newVal) {
      this.deviceType = newVal;
    },
    value(newVal, oldVal) {
      this.showMask = newVal;
    },
    showMask(val) {
      this.$emit("input", val);
    },
    attachViewTopPro(newVal) {
      this.attachViewTop = newVal;
    },
  },

  computed: {
    getSelectedItemBg() {
      if (this.darkMode === "light") {
        return "rgba(10, 89, 247, 0.1)";
      } else {
        return "rgba(82,145,255,0.4)";
      }
    },
    getUnselectedItemBg() {
      return "rgba(0,0,0,0)";
    },

    getSelectedItemText() {
      if (this.darkMode === "light") {
        return "#0A59F7";
      } else {
        return "#5291FF";
      }
    },
    getUnselectedItemText() {
      if (this.darkMode === "light") {
        return "rgba(0, 0, 0, 0.9)";
      } else {
        return "rgba(255, 255, 255, 0.86)";
      }
    },
    //两侧的弹框，距离左侧或右侧的边距
    getViewMarginLeft() {
      switch (this.deviceType) {
        case 1: //android手机
          return screenSize(12) + "px";
        case 2: //android Pad竖屏
          return screenSize(24) + "px";
        case 3: //android Pad横屏
          return screenSize(12) + "px";
        case 4: //android 折叠屏
          return screenSize(12) + "px";
        case 101: //iPhone
          return screenSize(12) + "px";
        case 102: //iPad
          return screenSize(24) + "px";
        default:
          return screenSize(12) + "px";
      }
    },
    getViewBottom() {
      switch (this.deviceType) {
        case 1:
        case 2:
        case 3:
        case 4:
        case 101:
        case 102:
        default:
          return (
            this.attachViewTop -
            this.listData["list"].length * screenSize(48) -
            screenSize(4 * 2) -
            screenSize(12) +
            "px"
          );
      }
    },
    getViewWidth() {
      switch (this.deviceType) {
        case 1: //android手机
          return (flexibleWidth - screenSize(12) * 3) / 2 + "px";
        case 2: //android Pad竖屏
          return (
            (flexibleWidth - screenSize(12) * 2 - screenSize(24) * 2) / 3 + "px"
          );
        case 3: //android Pad横屏
          return (flexibleWidth - screenSize(12) * 3) / 2 + "px";
        case 4: //android 折叠屏
          return (flexibleWidth - screenSize(12) * 4) / 3 + "px";
        case 101: //iPhone
          return (flexibleWidth - screenSize(12) * 3) / 2 + "px";
        case 102: //iPad
          return (
            (flexibleWidth - screenSize(12) * 2 - screenSize(24) * 2) / 3 + "px"
          );
        default:
          return (flexibleWidth - screenSize(12) * 3) / 2 + "px";
      }
    },
    getViewHeight() {
      switch (this.deviceType) {
        case 1: //android手机
          return (
            this.listData["list"].length * screenSize(48) + screenSize(8) + "px"
          );
        case 2: //android Pad竖屏
          return (
            this.listData["list"].length * screenSize(48) + screenSize(8) + "px"
          );
        case 3: //android Pad横屏
          return (
            this.listData["list"].length * screenSize(48) + screenSize(8) + "px"
          );
        case 4: //android 折叠屏
          return (
            this.listData["list"].length * screenSize(48) + screenSize(8) + "px"
          );
        case 101: //iPhone
          return (
            this.listData["list"].length * screenSize(48) + screenSize(8) + "px"
          );
        case 102: //iPad
          return (
            this.listData["list"].length * screenSize(48) + screenSize(8) + "px"
          );
        default:
          return (
            this.listData["list"].length * screenSize(48) + screenSize(8) + "px"
          );
      }
    },
  },
  methods: {
    clickBlank() {
      this.clickCancel();
    },
    closeMask() {
      this.showMask = false;
    },
    clickItem(key) {
      this.listData.selectedIndex = key;
      this.$emit("clickMyItem", key);
      this.closeMask();
    },
    clickCancel() {
      this.$emit("cancel");
      this.closeMask();
    },
    getDefaultTime: function (key) {
      if (this.listData.defaultSet == key) {
        return "(默认定时)";
      } else {
        return "";
      }
    },
  },
};
</script>
<style  scoped>
.listDialogContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 255, 0.2); */
  z-index: 9999;
}
.listDialogContainer .rightContainer {
  position: absolute;
  top: 50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* background: rgba(0, 255, 0, 0.5); */
}

.listDialogContainer .leftContainer {
  position: absolute;
  top: 50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.listDialogContainer .centerContainer {
  position: absolute;
  top: 50px;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: #ff0000; */
}

.listDialogContainer .leftRightCard {
  position: absolute;
  border-radius: 16px;
  box-shadow: 0px 10px 50px rgba(0, 0, 31, 0.15);
  width: 100%;
  height: 100%;
  background: var(--current-setting-card-bg-color);
}

.listDialogContainer .centerCard {
  position: absolute;
  border-radius: 16px;
  box-shadow: 0px 10px 50px rgba(0, 0, 31, 0.15);
  /* width: 100%; */
  height: 100%;
  background: var(--current-setting-card-bg-color);
}

.listDialogContainer .dialogBtnsContent {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  bottom: 4px;
  display: flex;
  flex-direction: column;
}

.listDialogContainer .timerBtnContainer {
  position: relative;
  height: 48px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.listDialogContainer .timeBtn {
  position: absolute;
  z-index: 1;
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 12px;
}

.listDialogContainer .timeBtn:active {
  background: var(--current-list-dialog-select-bg-color);
}

.listDialogContainer .timeBtn .left {
  font-size: 16px;
  color: var(--current-primary-color);
  margin-left: 12px;
}
.listDialogContainer .divider {
  position: absolute;
  z-index: 1;
  height: 0.25px;
  top: 47px;
  left: 12px;
  right: 12px;
  background-color: var(--current-divider-line-color);
}
</style>
